<template>
	<view style="display: flex;flex-wrap: wrap;padding: 20rpx;">
		<view v-show="item.status==1" v-for="(item,index) in clubList" :key="index" @click="showIndex=index" :class="{showItem:index==showIndex}"
			style="width: 200rpx;height: 250rpx;display: flex;justify-content: center;align-items: center;transition: all .25s linear;border-radius: 20rpx;">
			<view style="width: 188rpx;margin: auto;height: 230rpx;padding: 15rpx 0;">
				<u-image style="margin: auto;" shape="circle" ref="uImage" :width="120" :height="120" :src="item.logo"
					mode="aspectFill">
					<u-loading size="44" mode="flower" slot="loading" v-if="false"></u-loading>
					<view v-if="false" slot="error" style="font-size: 24rpx;">加载失败</view>
				</u-image>
				<view v-show="showIndex!=index"
					style="margin-top: 10rpx;text-align: center;font-size: 30rpx;font-weight: 700;">
					<view>{{item.clubname}}</view>
					<view>{{item.movementNum}}</view>
				</view>
				<view v-show="showIndex==index" style="margin-top: 25rpx;text-align: center;">
					<u-button @click="toSeeSeeClubInfo(index)" data-name="3333" :loading="false" :plain="false"
						shape="circle" size="mini" :ripple="true" type="success">查看详情</u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: ["clubList","isAll"],
		data() {
			return {
				showIndex: -1,
			}
		},
		methods: {
			toSeeSeeClubInfo(index) {
				console.log(index)
				var nowClub = this.clubList[index];
				console.log(nowClub)
				//得到社团id data[...]
				//跳转页面
				// this.$u.toast('按钮被点击')
				uni.navigateTo({
					url: '/pages/club/club-info/club-info?nowClub=' + encodeURIComponent(JSON.stringify(nowClub))
				});
			},
		}
	}
</script>

<style>

	.info {
		margin-top: 10rpx;
		text-align: center;
		font-size: 30rpx;
		font-weight: 700;
	}

	.showItem {
		transform: translateY(-5px);
		box-shadow: 3rpx 3rpx 20rpx #19be6b;
	}
</style>
